﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Left/Right Sample</title>
    <script src="../Scripts/jQuery-2.0.3.min.js" type="text/javascript"></script>
    <script src="../scripts/Subtract.min.js" type="text/javascript"></script>
    <style type="text/css">
        body {
            font-family: sans-serif;
        }

        div {
            border: 1px solid black;
            margin: 3px;
            padding: 3px;
            overflow: auto;
        }

        #main {
            padding: 10px;
            background: white;
            z-index: 2;
        }

        #navigate {
            width: 100px;
        }

        #featured {
            width: 125px;
            font-size: 10px;
        }
    </style>
</head>
<body>
    <div id="navigate" class="sj-fill-left">
        <h3>Left Side Content</h3>
        [<a href="Home.html">Home</a>]<br />
        [<a href="About.html">About Us</a>]<br />
        [<a href="ContactUs.html">Contact Us</a>]<br />
        [<a href="Information.html">Information</a>]<br />
        <br/>
        <button id="showHide">Show/Hide Right Element</button>

    </div>
    <div id="featured" class="sj-fill-right">
        <span style="font-weight: bold">Dr Who's On First Productions</span><br />
        1234 San Andreas Flt<br />
        Minneapolis, MN 55555<br />
    </div>
    <div id="main" class="sj-fill">
       Hiding or showing an element in SubtractJS can be accomplished by calling jQuery's .show, .hide, or .toggle and then calling SubtractJS.UpdateLayout() immediately after.<br/>
        <br/>
        For example, this page uses the following event handler to show or hide the right element.
        <pre>
$("#showHide").click(function () {
    $("#featured").toggle();
    SubtractJS.UpdateLayout();
});
</pre>
    </div>
    <script type="text/javascript">
        $("a").click(function (e) {
            alert('This is only a demo.  The link does not go anywhere.');
            e.preventDefault();
        });

        $("#showHide").click(function () {
            $("#featured").toggle();
            SubtractJS.UpdateLayout();
        });
    </script>
</body>
</html>
